<!doctype html>
<html lang="zh-CN">
<head>
    <title>页面标题</title>
    <meta name="keywords" content="页面关键词" />
    <meta name="description" content="页面描述" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="renderer" content="webkit">
    <!-- pintuer -->
    <script src="/lc/static/pintuer/jquery-3.4.1.min.js"></script>
    <link rel="stylesheet" href="/lc/static/pintuer/pintuer-2.0.min.css">
    <!--vue.js -->
    <script src="/lc/static/pintuer/vue.js" ></script>
</head>
<body>
    <form action="/lc/login" method="post">
        <input class="input" placeholder="请输入用户名" type="text" name="userName"/>
        <input class="input" placeholder="请输入密码" type="password" name="password" data-validate="required:请填写密码"/>
        <button class="button bg-sub" type="submit">登录</button>
    </form>

    <div id="app">
        <div v-html="message"></div>
        <button class="button bg-main" type="button" v-on:click="loveChina" >{{ btnName }}  </button>
        <input :value="btnName+'缩写'" type="button" @Click="mvvm" />
        <input value="changeName" type="button" @Click="changeName" />
        <input v-model="btnName" type="text"/>
        <ul >
            <li v-for="site in sites" >
                {{ site.name }}
            </li>
        </ul>
        <ol >
            <li v-for="(site,index) in sites" >
                {{ index }}  ---  {{ site.name }}
            </li>
        </ol>

        <ul>
            <li v-for="si in sites"> {{ si }} </li>
        </ul>

        <ol>
            <todo-item
                    v-for="todo in sites"
                    v-bind:todo="todo"
                    v-bind:key="todo.name"
            >
            </todo-item>
        </ol>

        <input type='text' v-model="firstName" />
        <input type='text' v-model="secondName" />
        <!-- <input type='text' v-bind:value='fullName' /> -->
        <input type='text' v-model='fullName' />
    </div>

</body>
<script>
    Vue.component("todo-item",
        {
            props:['todo'],
            template:'<li>{{ todo.name }}</li>'
        }
    )

    var data = 		{
message: '<h1>MyTest</h1>',
sites: [
{ name: 'Runoob' },
{ name: 'Google' },
{ name: 'Taobao' }
],
btnName:'Halo',
firstName:'Dickov',
secondName:'Fan',
}

var app = new Vue({
el:'#app',
data: data ,
methods:{
loveChina:function(){
console.log('zzzz');
alert("zZzZ");
},
mvvm:function(){
this.btnName='smg'
}		,
changeName:function(){
this.fullName = "Thiery Henry"
}
},
created:function(){
console.log('fuck')
},
computed:{
fullName:{
get:function(){
return this.firstName+' '+this.secondName;
},
set:function(newName){
var names = newName.split(' ');
console.log(names);
this.firstName = names[0];
this.secondName = names[1];
},
}
},
watch:{
firstName:function(){
alert('firstName is changed to '+this.firstName+'!')
}

}
})
</script>
</html>

  